<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="../js/vue.js"></script>
    <style>
        .img {
            width: 300px;
            height: 300px;
        }

        .static {
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            font-size: 100px;
            color: blue;
        }

        .a {
            background: fuchsia;
        }

        .b {
            border-radius: 50%;
        }

        .c {
            border: 5px solid yellowgreen;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2 :data-title="title">{{ title }}</h2>
        <h2 @click.once="countAdd">count == {{count}}</h2>
        <button @click="getEvent">获取Event</button>
        <button @click.prevent="getEvent($event,'1',2000)">获取Event==2</button>
        <div @click="parentClick">
            <h2>我是父元素--parent</h2>
            <h3 @click.stop="clickOne">我是子元素1 - 新年快乐</h3>
            <h3 @click.prevent="clickTwo">我是子元素2 - 新年好</h3>
        </div>
        <div>
            <h2>word == {{word}}</h2>
            <p>
                <input type="text" :value="word" @input="changeword">
            </p>
            <p>
                <input type="text" :value="word" @change="changeword">
            </p>
        </div>

        <div class="static a b c" @mousemove="mousemove" @touchstart="touchstart">mouse</div>
        <div>
            <p>
                <input type="text" placeholder="keyup" @keyup.enter.left.space="getKeycode">
            </p>
            <p>
                <input type="text" placeholder="keydown" @keydown.32.13.37="getKeycode">
            </p>
            <p>
                <input type="text" placeholder="keypress" @keypress="getKeycode">
            </p>
        </div>

        <div>
            <h2>过滤器</h2>
            <h2 :data-word="word | lower">word={{word|upper}}</h2>
            <h2>total={{total|numberFormat(8)}}</h2>
            <h2>number={{number|stringFormat(8)}}</h2>
            <h2>tel={{tel|telFormat(' ')}}</h2>
            <select v-model="currency">
                <option :value="item.unit" v-for="(item,index) in arrs" :key="index">
                    {{item.label}}
                </option>
            </select>
            <h2>{{currency}}</h2>
            <h2>money = {{money | currencyyFormat(currency,arrs.find(item=>item.unit==currency).icon,5,2)}}</h2>
            <h2>time={{time | dateFormat}}</h2>
        </div>
    </div>
    <script>
        // 全局过滤器
        Vue.filter("upper", (value) => {
            if (!value) return '';
            return value.toUpperCase()
        })
        Vue.filter('lower', (value) => {
            if (!value) return '';
            return value.toLowerCase()
        })
        Vue.filter('stringFormat', (value, n = 10) => {
            if (!value) return '';
            return value.toString(n)
        })
        Vue.filter('telFormat', (value, str = '-') => {
            if (!value) return '';
            value = value.toString().split('')
            value.splice(3, 0, str);
            value.splice(8, 0, str);
            return value.join('');
        })

        Vue.filter('currencyyFormat', (value, unit = '1', icon = '¥', max = 8, min = 8) => {
            if (!value) return '';
            value = value * unit;
            return icon + value.toLocaleString('zh', {
                maximumFractionDigits: max, // 最多几位小数
                minimumFractionDigits: min, // 最少几位小数
            })
        })
        // 日期过滤器
        Vue.filter('dateFormat', (value) => {
            if (!value) return '';
            var data = new Date(value);
            var year = data.getFullYear();
            var month = data.getMonth() + 1;
            var day = data.getDate();
            var hour = data.getHours();
            var min = data.getMinutes();
            var sec = data.getSeconds();
            return `${year}-${month}-${day} ${hour}:${min}:${sec}`
        })
        const vm = new Vue({
            // el:"#app"
            data: {  // 简单数据
                title: 'v-on 事件绑定',
                count: 2000,
                word: "Hello New Year",
                total: 54331.64157,
                number: 255,
                tel: 16844567894,
                money: 3701378216321.123214,
                arrs: [
                    { label: "人民币", unit: '1', icon: '¥' },
                    { label: "美元", unit: '0.14', icon: '$' },
                    { label: "日元", unit: '20', icon: '￥' },
                    { label: "韩元", unit: '185', icon: 'KRW' },
                    { label: "越南盾", unit: '3340', icon: 'VND' },
                ],
                currency: '1',
                time: new Date(),
            },
            // 局部过滤器
            filters: {
                numberFormat(value, n = 4) {
                    if (!value) return '';
                    return value.toFixed(n)
                }
            },
            methods: {
                countAdd() {
                    this.count++;
                },
                getEvent(e, a, b) {
                    console.log(e)
                    console.log(a)
                    console.log(b)
                },
                clickOne() {
                    console.log('clickOne - 1 我会阻止事件冒泡')
                },
                clickTwo() {
                    console.log('clickTwo - 2 我不会阻止事件冒泡 阻止浏览器的默认事件')
                },
                parentClick() {
                    console.log('parentClick - 父 ')
                },
                changeword(e) {
                    this.word = e.target.value;
                },
                mousemove(e) {
                    console.log(e.clientX)
                },
                touchstart() {
                    console.log('touchstart - 手机触摸')
                },
                getKeycode(e) {
                    console.log('按键码===' + e.keyCode)
                }
            },
            mounted() {
                // 真实DOM
                document.getElementsByTagName('title')[0].innerHTML = this.title;
            },
        }).$mount("#app")

    </script>
    <!-- 
        事件处理 
        用特殊变量 $event

        函数调用时候的参数 是 实参
        函数定义时候的参数 是 形参 

        $event vue 提供的事件对象 参数 

        事件修饰符

        event.preventDefault()   阻止浏览器事件的默认行为
        event.stopPropagation()  阻止事件冒泡 


        v-on 提供了事件修饰符 
 
        .stop        阻止单击事件继续传播  
        .prevent     阻止浏览器的默认事件  (滚动)
        .capture     
        .self
        .once        这个事件只能触发一次 
        .passive
  

        按键修饰符   键盘事件 (键盘码)
        .enter    13 
        right   39 
        left   37 
        space     32    
        up
        down 
    

        v-on:click  @click       
        input 
        change
        click
        dbclick
        keyup
        keydown
        keypress
        mousemove
        mousedown
        mouseup
        mouseenter
        mouserleave 
        touchstart   后面再讲 手机端的触摸事件 
        touchmove
        touchend


        原生绑定事件 (DOMO级事件  DOM2级 事件 )
        onclick="do()"  DOM0  
        document.getElementyById("box").onclick = fn;
        addEventListener("click",fn,false/true)  默认 false  false 冒泡   true 捕获   DOM2 
        removeEventListener("click")

        jquery 绑定事件 
        on  /  off   $('.box').on('click')
        bind  /  unbind  $('.box').bind('click')
        click()

        事件委托   ===> 基于事件冒泡的原理 把子元素的触发 父元素代替子元素执行 (给未来元素绑定事件 把事件绑定到父元素上去)
        $(parent).on('click',child,fn);    
        $(parent).delegate(child,'click',fn);   // 委托 
     -->
    <!-- 
        过滤器  filter 
        Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化  (日期格式 货币格式)

        过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 

        “管道”符号指示   |

        Vue.filter 全局过滤器 
        filters 局部过滤器 
      -->
</body>

</html>